<template>
  <div class="home-container">
    <el-card class="welcome-card">
      <h2>欢迎使用后台管理系统</h2>
      <p>当前用户：{{ userStore.userInfo?.nickname }}</p>
      <p>角色：{{ userStore.userInfo?.roles?.join('、') || '无' }}</p>
      <p>权限数量：{{ userStore.permissions.length }}</p>
    </el-card>

    <el-row :gutter="20" class="stats-row">
      <el-col :xs="24" :sm="12" :md="6">
        <el-card class="stat-card">
          <el-statistic title="今日访问" :value="1234" />
        </el-card>
      </el-col>
      <el-col :xs="24" :sm="12" :md="6">
        <el-card class="stat-card">
          <el-statistic title="总用户数" :value="5678" />
        </el-card>
      </el-col>
      <el-col :xs="24" :sm="12" :md="6">
        <el-card class="stat-card">
          <el-statistic title="报名人数" :value="910" />
        </el-card>
      </el-col>
      <el-col :xs="24" :sm="12" :md="6">
        <el-card class="stat-card">
          <el-statistic title="证书数量" :value="456" />
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script setup lang="ts">
import { useUserStore } from '@/stores/user';

const userStore = useUserStore()
</script>

<style scoped lang="scss">
.home-container {
  .welcome-card {
    margin-bottom: 20px;

    h2 {
      margin: 0 0 16px;
      font-size: 24px;
      color: #409eff;
    }

    p {
      margin: 8px 0;
      color: #666;

      .dark & {
        color: #999;
      }
    }
  }

  .stats-row {
    .stat-card {
      margin-bottom: 20px;
    }
  }
}
</style>

